<template>
  <div class="outBox">
    <div class="shops">商品卡片</div>
    <div class="picBox">
      <img class="bgPic" src="../../public/fengmian.jpg">
      <div class="info">
        <p>{{ name }}</p>
        <a-com>
          <template #title>
            <div class="biaoq">标签：{{ biao }}</div>
          </template>
        </a-com>
        <p>￥{{ price }}</p>
      </div>
      <div>
        X1
      </div>
      <hot-component>
        <template #hots>
          <div class="hot">{{ hot }}</div>
        </template>
      </hot-component>
    </div>
  </div>
</template>

<script>
import ACom from '@/components/ACom.vue'; // 确保路径正确
import Hot from '@/components/Hot.vue';
export default {
  data: function () {
    return {
      name: '风景',
      price: '360',
      biao: '风景系列',
      hot: 'Hot'
    }
  },
  methods: {
  },
  components: {
    'a-com': ACom,
    'hot-component': Hot
  }
}
</script>

<style>
.shops {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #1989FA;
  text-align: center;
  font-size: 20px;
  color: white;
}

.bgPic {
  width: 80px;
  height: 60px;
}

.picBox {
  padding: 10px;
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.info {
  flex: 1;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 10px;
}



.hot {
  width: 20px;
  height: 20px;
  background-color: red;
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 12px;
}
</style>
